<template>
  <el-dialog
    :visible="showDialog"
    @close="closeDialog"
    :close-on-click-modal="false"
    @open="opne"
    :title="showTitle"
  >
    <!-- 表单 -->

    <el-form
      ref="addForm"
      label-width="300px"
      :model="form"
      :rules="rules"
    >
      <el-form-item
        label="所属学科"
        prop="subjectID"
      >
        <el-select
          style="width:300px"
          placeholder="请选择"
          v-model="form.subjectID"
        >
          <el-option
            v-for="item in discipline"
            :key="item.id"
            :label="item.subjectName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="标签名称"
        style="width:600px"
        prop="tagName"
      >
        <el-input
          style="width:50%"
          placeholder="请输入标签名称"
          v-model="form.tagName"
        />
      </el-form-item>

    </el-form>
    <!-- footer插槽 -->
    <template v-slot:footer>
      <el-button @click="closeDialog">取消</el-button>
      <el-button
        type="primary"
        @click="confirmAddEmp"
      >确定</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { list as getQuestion } from '@/api/hmmm/subjects.js'
import { add, update } from '@/api/hmmm/tags.js'
// import { status } from '@/api/hmmm/constants.js/'
export default {
  data () {
    return {
      id: '',
      discipline: [],
      list: [],
      subjectID: [
        {
          value: 'list',
          label: '黄金糕'
        }
      ],

      form: {
        subjectID: '', // 学科id
        tagName: '' // 标签名称
      },
      rules: {
        tagName: [
          {
            required: true,
            message: '不能为空',
            trigger: ['blur', 'change']
          }
        ],
        subjectID: [
          {
            required: true,
            message: '所属学科不能为空',
            trigger: ['blur', 'change']
          }
        ]
      }
    }
  },
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    listform: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    listform (newval) {
      this.form = newval
    }
  },
  computed: {
    showTitle () {
      return this.form.id ? '添加' : '编辑'
    }
  },
  methods: {
    // 下拉菜单
    async opne () {
      const { data: res } = await getQuestion()
      this.discipline = res.items
      this.form = this.listform
    },
    async confirmAddEmp () {
      // 兜底校验
      this.$refs.addForm.validate(async (flag) => {
        if (!flag) return
        if (this.form.id) {
          await update(this.form)
          this.$message.success('修改成功')
        } else {
          await add(this.form) // 调用新增接口
          this.$message.success('添加成功')
        }

        this.closeDialog()
        // 通知到父组件更新数据
        this.$parent.$parent.$parent.getRoleList()
      })
    },
    closeDialog () {
      this.$emit('update:showDialog', false)
      this.$refs.addForm.resetFields()
    }
  }
}
</script>

<style>
</style>
